// 导入依赖
import { ajax, isLogin } from '../utils/ajax.js';  // 导入ajax和isLogin函数
import '../lib/jquery.js';  // 导入jQuery库
import '../lib/layui/layui.js';  // 导入layui库

// 立即执行函数，用于页面初始化
(async () => {
    try {
        // 检查用户登录状态
        const { status, user } = await isLogin();

        if (status === 1) {
            // 用户已登录
            handleLoggedIn(user);
        } else {
            // 用户未登录
            handleLoggedOut();
        }

        // 渲染轮播图
        await renderCarousel();
    } catch (error) {
        console.error('页面初始化失败:', error);
    }
})();

// 处理用户已登录的情况
function handleLoggedIn(user) {
    $('.off').removeClass('active');  // 隐藏未登录状态的UI
    $('.on').addClass('active');  // 显示登录状态的UI
    $('.nickname').text(user.nickname);  // 设置用户昵称显示
    $('.self').on('click', () => location.href = './self.html');  // 点击跳转到个人中心页面
    $('.logout').on('click', async () => {  // 退出登录按钮点击事件处理
        if (!confirm('确定要退出登录吗？')) return;  // 弹窗确认是否注销
        try {
            const id = localStorage.getItem('uid');
            const token = localStorage.getItem('token');
            const { data: { code } } = await ajax.get('/users/logout', { params: { id }, headers: { authorization: token } });
            if (code !== 1) throw new Error('注销失败');
            // 注销成功，清除本地存储的登录信息
            localStorage.removeItem('token');
            localStorage.removeItem('uid');
            // 切换回未登录状态的UI
            $('.off').addClass('active');
            $('.on').removeClass('active');
        } catch (error) {
            console.error('注销失败:', error);
            alert('注销失败');
        }
    });
}

// 处理用户未登录的情况
function handleLoggedOut() {
    $('.off').addClass('active');  // 显示未登录状态的UI
    $('.on').removeClass('active');  // 隐藏登录状态的UI
}

// 渲染轮播图
async function renderCarousel() {
    try {
        // 获取轮播图数据
        const { data: { code, list } } = await ajax.get('/carousel/list');
        if (code !== 1) throw new Error('获取轮播图失败');

        // 构建轮播图元素字符串
        let carouselHtml = '';
        list.forEach(item => {
            carouselHtml += `<div><img src="${ajax.defaults.baseURL}/${item.name}"></div>`;
        });

        // 渲染轮播图到页面
        $('#carousel > :first-child').html(carouselHtml);

        // 使用layui渲染轮播图
        layui.carousel.render({
            elem: '#carousel',  // 轮播图容器选择器
            width: '1200px',  // 设置容器宽度
            height: '600px',  // 设置容器高度
            arrow: 'hover',  // 鼠标悬停时显示箭头
            anim: 'fade'  // 设置切换动画效果为渐隐渐显
        });
    } catch (error) {
        console.error('渲染轮播图失败:', error);
    }
}
